<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>我的薪资</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../layuimini/lib/layui-v2.5.5/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../layuimini/css/public.css" media="all" />
</head>

<body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">

              <div class="layui-inline">
                <label class="layui-form-label">薪资日期:</label>
                <div class="layui-input-inline">
                  <input type="text" id="searchRewardDate" autocomplete="off" class="layui-input" />
                  <input type="hidden" name="year" id="searchyear" />
                  <input type="hidden" name="month" id="searchmonth" />
                </div>
              </div>
              <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
                  <i class="layui-icon layui-icon-search"></i> 搜 索
                </button>
              </div>
              <div class="layui-inline">
                <a type="button" class="layui-btn layui-btn-primary" id="data-reset-btn">
                  <i class="layui-icon"></i> 重 置
                </a>
              </div>
            </div>
          </form>
        </div>
      </fieldset>

      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm layui-btn-sucess" lay-event="refresh">
            刷新
          </button>
          <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="export">
            导出全部数据
          </button>
        </div>
      </script>

      <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

      <div class="layui-row">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>工资趋势图</div>
            <div class="layui-card-body">
              <div id="salary-echarts" style="width: 100%;min-height:500px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="../../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script src="../../layuimini/js/lay-config.js" charset="utf-8"></script>
  <script>
    var tableIns
    layui.use(
      ['layer', 'form', 'table', 'laydate', 'common', 'excel', 'echarts_latest'],
      function (args) {
        var $ = layui.jquery,
          form = layui.form,
          laydate = layui.laydate,
          table = layui.table,
          common = layui.common,
          excel = layui.excel
        echarts = layui.echarts_latest

        var id_now = -1

        //得到个人工资表
        common.axios('/getPersonIdnow', 'get', null, function (res) {
          id_now = res.data.data
          //console.log(id_now)
          tableIns = table.render({
            elem: '#currentTableId',
            url: common.api + '/salary/list',
            where: {
              token: common.getToken,
              personalId: id_now
            },
            toolbar: '#toolbarDemo',
            title: '职工薪资信息',
            limits: [1, 5, 10, 15, 20],
            limit: 15,
            page: true,
            skin: 'row',
            even: true,
            cols: [
              [{
                  field: 'salaryDate',
                  minWidth: 200,
                  title: '发薪日期',
                  align: 'center',
                  templet: function (d) {
                    var time = layui.util.toDateString(
                      d.salaryDate,
                      'yyyy-MM-dd'
                    )
                    return '<div>' + time + '</div>'
                  },
                  sort: true,
                },
                {
                  field: 'basisSalary',
                  minWidth: 150,
                  title: '基本工资',
                  align: 'center',
                  templet: function (d) {
                    return d.basisSalary + '元'
                  },
                  sort: true,
                },
                {
                  field: 'socialSalary',
                  minWidth: 100,
                  title: '社保',
                  align: 'center',
                  templet: function (d) {
                    return d.socialSalary + '元'
                  },
                },
                {
                  field: 'providentFund',
                  minWidth: 100,
                  title: '公积金',
                  align: 'center',
                  templet: function (d) {
                    return d.providentFund + '元'
                  },
                },
                {
                  field: 'bonus',
                  minWidth: 100,
                  title: '奖金',
                  align: 'center',
                  templet: function (d) {
                    return d.bonus + '元'
                  },
                },
                {
                  field: 'subsidySalary',
                  minWidth: 100,
                  title: '罚款',
                  align: 'center',
                  templet: function (d) {
                    return d.subsidySalary + '元'
                  },
                },
                {
                  field: 'allSalary',
                  minWidth: 150,
                  title: '应发工资',
                  align: 'center',
                  templet: function (d) {
                    return d.allSalary + '元'
                  },
                  sort: true,
                },
              ],
            ],
            parseData: function (res) {
              if (res.code != 200) {
                common.login()
              }
              return {
                code: res.code, //解析接口状态
                msg: res.msg, //解析提示文本
                count: res.data.total, //解析数据长度
                data: res.data.list, //解析数据列表
              }
            },
            response: {
              statusCode: 200, //重新规定成功的状态码为 200，table 组件默认为 0
            },
            request: {
              pageName: 'page', //页码的参数名称，默认：page
              limitName: 'size', //每页数据量的参数名，默认：limit
            },
          })

          salary_charts = echarts.init(document.getElementById('salary-echarts'))
          common.axios('/salary/list', 'get', {
            personalId: id_now
          }, function (res) {
            salary_list = res.data.data.list

            let basic = [] //基本工资
            let bonus = [] //奖金
            let total = [] //总工资
            let providentFund = [] //公积金
            let socialSalary = [] //社保
            let fine = [] //罚款
            let salaryDate = []
            console.log(salary_list)
            salary_list.sort(function (a, b) {
              let day1 = new Date(a.salaryDate)
              let day2 = new Date(b.salaryDate)
              return day1 - day2
            })
            for (salary of salary_list) {
              basic.push(salary.basisSalary)
              bonus.push(salary.bonus)
              providentFund.push(salary.providentFund)
              socialSalary.push(salary.socialSalary)
              fine.push(salary.subsidySalary)
              let day = new Date(salary.salaryDate)
              day_str = day.getFullYear() + '/' + day.getMonth() + '/' + day.getDate()
              salaryDate.push(day_str)
              total.push(salary.allSalary)
            }

            salary_option = {
              title: {
                text: '我的工资'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['基本工资', '奖金', '公积金', "社会保险", "罚款", '总工资']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: salaryDate
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                  name: '基本工资',
                  type: 'line',
                  data: basic
                },
                {
                  name: '奖金',
                  type: 'line',
                  //stack: 'Total',
                  data: bonus
                },
                {
                  name: '公积金',
                  type: 'line',
                  data: providentFund
                },
                {
                  name: "社会保险",
                  type: "line",
                  data: socialSalary
                },
                {
                  name: "罚款",
                  type: "line",
                  data: fine
                },
                {
                  name: '总工资',
                  type: 'line',
                  //stack: 'Total',
                  data: total
                }
              ]
            }

            salary_charts.setOption(salary_option)

          })
        })


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
          var param = data.field
          console.log(param)
          // 执行搜索重载
          tableIns.reload({
            url: common.api + '/salary/list',
            method: 'get',
            where: param,
          })
          return false
        })

        //监听工具栏添加删除刷新
        table.on('toolbar(currentTableFilter)', function (obj) {
          if (obj.event === 'refresh') {
            tableIns.reload({
              url: common.api + '/salary/list',
              where: {
                personalId:id_now
              },
            })
          } else if (obj.event === 'export') {
            common.axios('/salary/list', 'get', {
              personalId: id_now
            }, function (res) {
              console.log(res)
              var data = res.data.data.list
              // data = common.compare(data)
              console.log(data)
              data = excel.filterExportData(data, [
                'salaryDate',
                'basisSalary',
                'subsidySalary',
                'socialSalary',
                'providentFund',
                'bonus',
                'allSalary',
              ])
              data.unshift({
                salaryDate: '下发日期',
                basisSalary: '基本工资',
                subsidySalary: '罚款',
                socialSalary: '社保',
                providentFund: '公积金',
                bonus: '奖金',
                allSalary: '应发工资',
              })
              var timestart = Date.now()
              excel.exportExcel({
                  sheet1: data,
                },
                '个人工资表.xlsx',
                'xlsx'
              )
              var timeend = Date.now()

              var spent = (timeend - timestart) / 1000
              layer.msg('单纯导出耗时 ' + spent + ' s')
            })
          }
        })

        form.on('select(select)', function (obj) {
          var txtval = obj.elem[obj.elem.selectedIndex].text
          $('#departmentName').val(txtval)
          $('#selectPersonal').val(0)
          form.render('select')
        })

        form.on('select(selectPersonal)', function (obj) {
          $('#selectId').val(0)
          $('#departmentName').val('')
          form.render('select')
        })

        var selectData, personalDate
        layer.ready(function () {
          // 监听重置操作
          $('#data-reset-btn').click(function () {
            $('#selectId').val(0)
            $('#selectPersonal').val(0)
            $('#departmentName').val('')
            $('#searchyear').val('')
            $('#searchmonth').val('')
            form.render('select')
            tableIns.reload({
              url: common.api + '/salary/list',
              method: 'get',
              where: {
                departmentName: '',
                personalId: id_now,
                year: '',
                month: '',
              },
            })
          })
          //加载日期
          laydate.render({
            elem: '#searchRewardDate',
            format: 'yyyy-MM',
            type: 'month',
            done: function (value) {
              var date = value.split('-')
              $('#searchyear').val(date[0])
              $('#searchmonth').val(date[1])
            },
          })
        })

      }
    )
  </script>
</body>

</html>